<template>
	<view class="page-container">
		<view class="header">
			<view class="back-btn" @click="goBack">
				<text class="iconfont icon-back"></text>
			</view>
			<view class="title">筛选结果</view>
		</view>
		
		<view class="filter-summary">
			<view class="summary-header">
				<text class="title">已选条件</text>
				<text class="clear-btn" @click="clearFilters">清空</text>
			</view>
			<scroll-view class="tags-container" scroll-x="true" show-scrollbar="false">
				<view class="tags-wrapper">
					<view class="tag" v-if="settings.location.length">
						<text class="label">地区</text>
						<text class="value">{{ settings.location.join('、') }}</text>
					</view>
					<view class="tag" v-if="settings.ageMin || settings.ageMax">
						<text class="label">年龄</text>
						<text class="value">{{ (settings.ageMin || '不限') + '-' + (settings.ageMax || '不限') }}</text>
					</view>
					<view class="tag" v-if="settings.heightMin || settings.heightMax">
						<text class="label">身高</text>
						<text class="value">{{ (settings.heightMin || '不限') + '-' + (settings.heightMax || '不限') }}</text>
					</view>
					<view class="tag" v-if="settings.marriage.length">
						<text class="label">婚姻</text>
						<text class="value">{{ settings.marriage.join('、') }}</text>
					</view>
					<view class="tag" v-for="tag in visibleTags" :key="tag.key">
						<text class="label">{{ tag.label }}</text>
						<text class="value">{{ tag.value }}</text>
					</view>
				</view>
			</scroll-view>
		</view>

		<view class="results-container">
			<view class="results-header">
				<text class="title">匹配结果</text>
				<text class="subtitle">为您找到{{ results.length }}位合适的人选</text>
			</view>
			
			<scroll-view class="results-list" scroll-y>
				<view class="result-card" v-for="(item, index) in results" :key="index">
					<image class="avatar" :src="item.avatar" mode="aspectFill"></image>
					<view class="info">
						<view class="basic-info">
							<text class="name">{{ item.name }}</text>
							<text class="age">{{ item.age }}岁</text>
							<text class="location">{{ item.location }}</text>
						</view>
						<view class="tags">
							<text class="tag" v-for="(tag, tagIndex) in item.tags" :key="tagIndex">{{ tag }}</text>
						</view>
						<view class="match-rate">
							<text class="rate-text">匹配度</text>
							<text class="rate-value">{{ item.matchRate }}%</text>
						</view>
					</view>
					<view class="action-buttons">
						<button class="action-btn like" @click="handleLike(item)">喜欢</button>
						<button class="action-btn message" @click="handleMessage(item)">联系</button>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			settings: {
				location: [],
				ageMin: '',
				ageMax: '',
				heightMin: '',
				heightMax: '',
				incomeMin: '',
				incomeMax: '',
				marriage: [],
				house: [],
				car: [],
				education: [],
				career: [],
				personality: [],
				lifestyle: [],
				hobbies: []
			},
			results: [],
			tagLabels: {
				house: '住房',
				car: '车辆',
				education: '学历',
				career: '职业',
				personality: '性格',
				lifestyle: '生活习惯',
				hobbies: '兴趣爱好'
			}
		}
	},
	computed: {
		filterTags() {
			return {
				house: this.settings.house,
				car: this.settings.car,
				education: this.settings.education,
				career: this.settings.career,
				personality: this.settings.personality,
				lifestyle: this.settings.lifestyle,
				hobbies: this.settings.hobbies
			}
		},
		visibleTags() {
			return Object.entries(this.filterTags)
				.filter(([key, items]) => items && items.length > 0)
				.map(([key, items]) => ({
					key,
					label: this.tagLabels[key],
					value: items.join('、')
				}))
		}
	},
	onLoad() {
		// 从本地存储获取数据
		try {
			const settings = uni.getStorageSync('matchSettings')
			const results = uni.getStorageSync('matchResults')
			if (settings) {
				this.settings = settings
			}
			if (results) {
				this.results = results
			}
			
			// 清除存储的数据
			uni.removeStorageSync('matchSettings')
			uni.removeStorageSync('matchResults')
		} catch (e) {
			console.error('获取数据失败', e)
		}
	},
	methods: {
		goBack() {
			uni.navigateBack()
		},
		clearFilters() {
			Object.keys(this.settings).forEach(key => {
				if (Array.isArray(this.settings[key])) {
					this.settings[key] = []
				} else {
					this.settings[key] = ''
				}
			})
			// 重新请求结果
			this.fetchResults()
		},
		handleLike(item) {
			uni.showToast({
				title: '已喜欢' + item.name,
				icon: 'none'
			})
		},
		handleMessage(item) {
			uni.navigateTo({
				url: `./service-chat?id=${item.id}`
			})
		},
		fetchResults() {
			// TODO: 根据筛选条件重新获取结果
			console.log('重新获取结果', this.settings)
		}
	}
}
</script>

<style lang="scss">
.page-container {
	min-height: 100vh;
	background: #f8f9fa;
	padding: 0 0 30rpx;
	
	.header {
		height: 88rpx;
		background: #fff;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		position: relative;
		box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
		
		.back-btn {
			position: absolute;
			left: 30rpx;
			font-size: 36rpx;
			color: #333;
		}
		
		.title {
			flex: 1;
			text-align: center;
			font-size: 32rpx;
			font-weight: 500;
			color: #333;
		}
	}
	
	.filter-summary {
		background: #fff;
		padding: 20rpx 30rpx;
		margin: 20rpx 0;
		
		.summary-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;
			
			.title {
				font-size: 28rpx;
				color: #333;
				font-weight: 500;
			}
			
			.clear-btn {
				font-size: 24rpx;
				color: #999;
				padding: 4rpx 12rpx;
				
				&:active {
					opacity: 0.7;
				}
			}
		}
		
		.tags-container {
			width: 100%;
			white-space: nowrap;
			
			.tags-wrapper {
				display: inline-flex;
				flex-wrap: nowrap;
				padding: 4rpx 0;
				
				.tag {
					display: inline-flex;
					align-items: center;
					padding: 12rpx 20rpx;
					background: rgba(246,148,137,0.1);
					border-radius: 24rpx;
					margin-right: 16rpx;
					
					.label {
						font-size: 24rpx;
						color: #f69489;
						margin-right: 8rpx;
						
						&::after {
							content: '：';
						}
					}
					
					.value {
						font-size: 24rpx;
						color: #666;
					}
				}
			}
		}
	}
	
	.results-container {
		background: #fff;
		padding: 30rpx;
		
		.results-header {
			margin-bottom: 30rpx;
			
			.title {
				font-size: 32rpx;
				font-weight: 600;
				color: #333;
				display: block;
				margin-bottom: 8rpx;
			}
			
			.subtitle {
				font-size: 24rpx;
				color: #999;
			}
		}
		
		.results-list {
			height: calc(100vh - 400rpx);
			
			.result-card {
				display: flex;
				padding: 20rpx;
				background: #f8f9fa;
				border-radius: 16rpx;
				margin-bottom: 20rpx;
				
				.avatar {
					width: 120rpx;
					height: 120rpx;
					border-radius: 60rpx;
					margin-right: 20rpx;
				}
				
				.info {
					flex: 1;
					
					.basic-info {
						margin-bottom: 12rpx;
						
						.name {
							font-size: 32rpx;
							font-weight: 500;
							color: #333;
							margin-right: 16rpx;
						}
						
						.age, .location {
							font-size: 24rpx;
							color: #666;
							margin-right: 16rpx;
						}
					}
					
					.tags {
						display: flex;
						flex-wrap: wrap;
						gap: 8rpx;
						margin-bottom: 12rpx;
						
						.tag {
							font-size: 22rpx;
							color: #f69489;
							background: rgba(246,148,137,0.1);
							padding: 4rpx 12rpx;
							border-radius: 20rpx;
						}
					}
					
					.match-rate {
						display: flex;
						align-items: center;
						
						.rate-text {
							font-size: 24rpx;
							color: #999;
							margin-right: 8rpx;
						}
						
						.rate-value {
							font-size: 28rpx;
							color: #f69489;
							font-weight: 500;
						}
					}
				}
				
				.action-buttons {
					display: flex;
					flex-direction: column;
					justify-content: center;
					gap: 12rpx;
					
					.action-btn {
						width: 120rpx;
						height: 60rpx;
						font-size: 24rpx;
						border-radius: 30rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						
						&.like {
							background: #f69489;
							color: #fff;
						}
						
						&.message {
							background: #fff;
							color: #f69489;
							border: 2rpx solid #f69489;
						}
					}
				}
			}
		}
	}
}
</style> 